<template>
  <div>
    <header class="header">
      <!--      <el-input  placeholder="" v-for="(item,index) in topInputList" :key="index" v-model="item.text" :placeholder="item.title" class="top-input"></el-input>-->
      <!--      <div class="everyBox slelctBox">-->
      <!--        <span class="span">类型：</span>-->
      <!--        <el-select  v-model="value1" placeholder="请选择" @change="opctionchangeOne">-->
      <!--          <el-option-->
      <!--            v-for="item in options1"-->
      <!--            :key="item.value"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </div>-->
      <!--      <el-date-picker-->
      <!--        class="datePicker"-->
      <!--        v-model="time"-->
      <!--        type="datetimerange"-->
      <!--        @change="datePicker"-->
      <!--        range-separator="至"-->
      <!--        start-placeholder="开始日期"-->
      <!--        end-placeholder="结束日期">-->
      <!--      </el-date-picker>-->

      <!--      <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>-->
      <!--      <div style="margin:0 10px ">-->
      <!--        <download-excel-->
      <!--          :fields="exportDataStandard"-->
      <!--          :data="multipleSelection1"-->
      <!--          type="xls"-->
      <!--          :name="exportName"-->
      <!--          :defaultValue="exportDefaultValue"-->
      <!--          :fetch="createExportData"-->
      <!--          :before-generate="startDownload"-->
      <!--          :before-finish="finishDownload"-->
      <!--          worksheet="导出信息"-->
      <!--        >-->
      <!--          &lt;!&ndash; 上面可以自定义自己的样式，还可以引用其他组件button &ndash;&gt;-->
      <!--          <el-button type="primary" icon="el-icon-download">导出</el-button>-->
      <!--        </download-excel>-->
      <!--        &lt;!&ndash;        <el-button type="primary" icon="el-icon-download" @click="derive">导出</el-button>&ndash;&gt;-->
      <!--      </div>-->
      <el-button type="primary" icon="el-icon-plus" @click="add"
        >添加</el-button
      >
    </header>

    <div class="body">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        fit
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" fixed></el-table-column>
        <el-table-column show-overflow-tooltip prop="id" label="ID" width="50">
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="user_id"
          label="用户ID"
          width="80"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="decoration_address"
          label="装修地址"
          width=""
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="status"
          label="是否质保"
          width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.status == 1 ? "可以质保" : "不可以质保" }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="completion_acceptance_time"
          label="竣工时间"
          width=""
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="construction_delay_end"
          label="质保截至日期"
          width=""
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="contract_period"
          label="合同期限"
          width=""
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="decoration"
          label="装修面积"
          width=""
        >
          <template slot-scope="scope">
            {{ scope.row.decoration ? scope.row.decoration + "m²" : "" }}
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="checkOrder(scope.row)" size="mini"
              >查看</el-button
            >
            <el-button @click="set(scope.row)" size="mini">编辑</el-button>
            <el-button @click="deleteBtn(scope.row)" size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      fullscreen
      :before-close="CloseDialog"
    >
      <el-dialog
        width="60%"
        title=""
        :visible.sync="innerVisible"
        append-to-body
      >
        <iframe
          :src="wenjianSrc"
          frameborder="0"
          width="100%"
          height="700"
        ></iframe>
      </el-dialog>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="115px"
        class="demo-ruleForm"
      >
        <div
          style="
            font-size: 19px;
            text-align: center;
            margin-bottom: 20px;
            font-weight: 700;
          "
        >
          装修设计
        </div>
        <div style="display: flex; flex-wrap: wrap">
          <el-form-item label="设计单位" prop="design_unit" class="formItem">
            <el-input v-model="ruleForm.design_unit"></el-input>
          </el-form-item>
          <el-form-item label="主案设计" prop="design_unit" class="formItem">
            <el-input v-model="ruleForm.project_design"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="design_phone" class="formItem">
            <el-input v-model="ruleForm.design_phone"></el-input>
          </el-form-item>
          <!-- <el-form-item
            label="关联用户名称"
            prop="user_id"
            class="formItem"
            v-if="dialogTitle == '添加质保'"
          >
            <el-input v-model="ruleForm.user_name"></el-input>
          </el-form-item> -->
          <el-form-item
            label="关联用户编码"
            prop="user_id"
            class="formItem"
            v-if="dialogTitle == '添加质保'"
          >
            <el-input v-model="ruleForm.user_id"></el-input>
          </el-form-item>

          <el-form-item
            label="关联用户名称"
            prop="user_id"
            class="formItem"
            v-if="dialogTitle != '添加质保'"
          >
            <el-input v-model="ruleForm.user_name" disabled></el-input>
          </el-form-item>
          <el-form-item
            label="关联用户编码"
            prop="user_id"
            class="formItem"
            v-if="dialogTitle != '添加质保'"
          >
            <!-- <el-input v-model="guanlianName" disabled></el-input> -->
            <el-input v-model="ruleForm.user_id" disabled></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="design_unit" class="formItem">
            <el-select
              v-model="ruleForm.status"
              placeholder="请选择"
              @change="opctionchangeOne1"
            >
              <el-option
                v-for="item in hetongStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="shejiImageList">
          <div
            v-for="(item, index) in shejiImageList"
            :key="index"
            class="every"
          >
            <div>
              <div class="unlodBox">
                <el-upload
                  class="upload-demo"
                  action
                  :http-request="uploadFile"
                  ref="upload"
                  :limit="fileLimit"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :on-exceed="handleExceed"
                  :before-upload="beforeUpload"
                  :data="{ index: index, data: item }"
                  drag
                  :show-file-list="false"
                  :headers="headers"
                >
                  <div v-if="!item.img">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <div>{{ item.name }}</div>
                  </div>
                  <div
                    v-if="item.img"
                    style="
                      height: 100%;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="item.img"
                      fit="cover"
                    ></el-image>
                    <div>{{ item.name }}</div>
                    <el-image-viewer
                      v-if="showViewer"
                      :on-close="closeViewer"
                      :url-list="[url]"
                    />
                  </div>
                </el-upload>
                <el-button @click="chakan(item)">查看</el-button>
              </div>
            </div>
          </div>
        </div>
        <!--        装修施工-->
        <div
          style="
            font-size: 19px;
            text-align: center;
            margin-bottom: 20px;
            font-weight: 700;
            margin-top: 20px;
          "
        >
          装修施工
        </div>
        <div style="display: flex; flex-wrap: wrap">
          <el-form-item label="甲方名称" prop="name" class="formItem">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="品牌名称" prop="brand" class="formItem">
            <el-input v-model="ruleForm.brand"></el-input>
          </el-form-item>
          <el-form-item label="租赁期限" prop="lease_term" class="formItem">
            <el-input v-model="ruleForm.lease_term"></el-input>
          </el-form-item>
          <el-form-item label="装修面积" prop="decoration" class="formItem">
            <el-input v-model="ruleForm.decoration"></el-input>
          </el-form-item>
          <el-form-item
            label="行业属性"
            prop="Industry_attributes"
            class="formItem"
          >
            <el-input v-model="ruleForm.Industry_attributes"></el-input>
          </el-form-item>
          <!--          <el-form-item label="租赁合同" prop="design_unit" class="formItem">-->
          <!--            <el-input v-model="ruleForm.lease_contract"></el-input>-->
          <!--          </el-form-item>-->

          <el-form-item
            label="装修地址"
            prop="decoration_address"
            class="formItem"
          >
            <el-input v-model="ruleForm.decoration_address"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; flex-wrap: wrap">
          <!--          <el-form-item label="房产证明" prop="design_unit" class="formItem">-->
          <!--            <el-input v-model="ruleForm.property_certificate"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item
            label="施工单位"
            prop="construction_unit"
            class="formItem"
          >
            <el-input v-model="ruleForm.construction_unit"></el-input>
          </el-form-item>
          <el-form-item label="甲方代表" prop="behalf_party" class="formItem">
            <el-input v-model="ruleForm.behalf_party"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="behalf_phone" class="formItem">
            <el-input v-model="ruleForm.behalf_phone"></el-input>
          </el-form-item>
          <el-form-item label="乙方代表" prop="partyb_party" class="formItem">
            <el-input v-model="ruleForm.partyb_party"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="partyb_phone" class="formItem">
            <el-input v-model="ruleForm.partyb_phone"></el-input>
          </el-form-item>
          <el-form-item
            label="施工队长"
            prop="construction_foreman"
            class="formItem"
          >
            <el-input v-model="ruleForm.construction_foreman"></el-input>
          </el-form-item>
          <el-form-item
            label="联系电话"
            prop="construction_phone"
            class="formItem"
          >
            <el-input v-model="ruleForm.construction_phone"></el-input>
          </el-form-item>
          <el-form-item label="合同期限" class="formItem">
            <!--            <el-input v-model="ruleForm.contract_period"></el-input>-->
            <el-date-picker
              v-model="time"
              @change="datePicker2"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="竣工验收" class="formItem">
            <!--            <el-input v-model="ruleForm.completion_acceptance_time"></el-input>-->
            <el-date-picker
              v-model="jungong"
              @change="jungongChange"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="质保截止日期" class="formItem">
            <!--            <el-input v-model="ruleForm.construction_delay_end"></el-input>-->
            <el-date-picker
              v-model="construction_delay_end"
              @change="zhibaojiezhiChange"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="施工延期" prop="design_unit" class="formItem">
            <el-input disabled v-model="ruleForm.construction_delay"></el-input>
          </el-form-item>
          <!--          <el-form-item label="施工变更" prop="design_unit" class="formItem">-->
          <!--            <el-input v-model="ruleForm.construction_changes"></el-input>-->
          <!--          </el-form-item>-->
        </div>
        <div class="zhuangxiuImg">
          <div v-for="(item, index) in zhuangxiuImg" :key="index" class="every">
            <div>
              <div class="unlodBox">
                <el-upload
                  class="upload-demo"
                  action
                  :http-request="uploadFile"
                  ref="upload"
                  :limit="fileLimit"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :on-exceed="handleExceed"
                  :before-upload="beforeUpload1"
                  :data="{ index: index, data: item }"
                  drag
                  :show-file-list="false"
                  :headers="headers"
                >
                  <div v-if="!item.img">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <div>{{ item.name }}</div>
                  </div>
                  <div
                    v-if="item.img && item.type == 'image'"
                    style="
                      height: 100%;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="item.img"
                      fit="cover"
                    ></el-image>
                    <i
                      v-if="item.img && item.type == 'other'"
                      style="font-size: 30px"
                      class="el-icon-folder-opened"
                    ></i>
                    <div>{{ item.name }}</div>
                  </div>
                  <div
                    v-if="item.img && item.type == 'other'"
                    style="
                      height: 100%;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <i
                      v-if="item.img && item.type == 'other'"
                      style="font-size: 30px"
                      class="el-icon-folder-opened"
                    ></i>
                    <div>{{ item.name }}</div>
                  </div>
                </el-upload>
                <el-button @click="chakan(item)">查看</el-button>
                <!--                <el-button v-if="item.type=='other'" @click="xiazai(item)">下载</el-button>-->
              </div>
            </div>
          </div>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer" v-if="dialogTitle != '查看'">
        <el-button
          class="btn"
          type="primary"
          @click="save"
          v-if="dialogTitle == '添加质保'"
          >保 存</el-button
        >
        <el-button
          class="btn"
          type="primary"
          @click="save2"
          v-if="dialogTitle == '编辑'"
          >保 存</el-button
        >
        <el-button class="btn" @click="closeVisible">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  construction_list,
  construction_add,
  uploadFilec,
  construction_del,
  construction_up,
} from "../../../../utils/api";
import { uploadDocument } from "../../../../utils/main";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { compressImage } from "../../../../assets/js/compressImage";

export default {
  name: "fitment",
  components: {
    ElImageViewer,
  },
  data() {
    return {
      imgHeader: this.Global.imgHeader,
      srcList2: {},
      ruleForm: {
        mobile: "",
        status: "2",
        design_unit: "", //'设计单位',
        project_design: "", //'主案设计',
        design_phone: "", // 设计电话
        working_drawing: "", // '施工图',
        rendering: "", //  '效果图',
        panorama: "", // '全景图',
        digital_img: "", // '数字化审图',
        changes: "", //  '施工变更',
        effect_change: "", //  '效果变更',
        panoramic_changes: "", //  '全景变更',
        digital_change: "", //  '数字化变更',
        name: "", //'甲方名称',
        brand: "", //  '品牌名称',
        decoration: "", //  '装修面积',
        lease_contract: "", //  '租赁合同',
        property_certificate: "", //  '房产证明',
        Industry_attributes: "", //  '行业属性',
        lease_term: "", //  '租赁期限',
        decoration_address: "", //  '装修地址',
        construction_unit: "", //  '施工单位',
        behalf_party: "", //  '甲方代表',
        behalf_phone: "", //  '甲方电话',
        partyb_party: "", // '甲方代表',
        partyb_phone: "", //  '乙方电话',
        construction_foreman: "", //  '施工工长',
        construction_phone: "", //  '施工电话',
        contract_period: "", //  '合同期限',
        completion_acceptance_time: "", //  '竣工验收时间',
        construction_delay_end: "", //质保截至日期
        construction_delay: "", //  '施工延期',
        construction_changes: "", //  '施工变更',
        remove: "", //拆除合同
        construction: "", //施工合同
        construction_budget: "", //施工预算
        disclosure: "", //施工交底
        hidden: "", //隐检验收
        completion_acceptance: "", //竣工验收
        engineering_settlement: "", //工程结算
        warranty: "", //施工质保
        testimonials: "", //客户评价
      },
      jungong: "",
      wenjianSrc: "",
      url: "",
      construction_delay_end: "",
      showViewer: false,
      shejiImageList: [
        { type: "", name: "施工图", img: "", shuju: "working_drawing" },
        { type: "", name: "效果图", img: "", shuju: "rendering" },
        { type: "", name: "全景图", img: "", shuju: "panorama" },
        { type: "", name: "数字化审图", img: "", shuju: "digital_img" },
        { type: "", name: "施工变更", img: "", shuju: "changes" },
        { type: "", name: "效果变更", img: "", shuju: "effect_change" },
        { type: "", name: "全景变更", img: "", shuju: "panoramic_changes" },
        { type: "", name: "数字化变更", img: "", shuju: "digital_change" },
      ],
      zhuangxiuImg: [
        { type: "", name: "租赁合同", img: "", shuju: "lease_contract" },
        { type: "", name: "房产证明", img: "", shuju: "property_certificate" },
        { type: "", name: "拆除合同", img: "", shuju: "remove" },
        { type: "", name: "施工变更", img: "", shuju: "construction_changes" },
        { type: "", name: "施工合同", img: "", shuju: "construction" },
        { type: "", name: "施工预算", img: "", shuju: "construction_budget" },
        { type: "", name: "施工交底", img: "", shuju: "disclosure" },
        { type: "", name: "隐检验收", img: "", shuju: "hidden" },
        { type: "", name: "竣工验收", img: "", shuju: "completion_acceptance" },
        {
          type: "",
          name: "工程结算",
          img: "",
          shuju: "engineering_settlement",
        },
        { type: "", name: "施工质保", img: "", shuju: "warranty" },
        { type: "", name: "客户评价", img: "", shuju: "testimonials" },
      ],
      rules: {
        design_phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[3456789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        behalf_phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[3456789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        partyb_phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[3456789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        construction_phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[3456789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        user_id: [
          { required: true, message: "请输入关联用户编码", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入甲方名称", trigger: "blur" }],
        brand: [{ required: true, message: "请输入品牌名称", trigger: "blur" }],
        lease_term: [
          { required: true, message: "请输入租赁期限", trigger: "blur" },
        ],
        // time: [
        //   { required: true, message: "请选择合同期限", trigger: "change" },
        // ],
        // construction_delay_end: [
        //   { required: true, message: "请选择质保截止日期", trigger: "change" },
        // ],
        Industry_attributes: [
          { required: true, message: "请填写行业属性", trigger: "blur" },
        ],
        behalf_party: [
          { required: true, message: "请填写甲方代表", trigger: "blur" },
        ],
        decoration_address: [
          { required: true, message: "请填写装修地址", trigger: "blur" },
        ],
        partyb_party: [
          { required: true, message: "请填写乙方代表", trigger: "blur" },
        ],
        construction_foreman: [
          { required: true, message: "请填写施工队长", trigger: "blur" },
        ],
        decoration: [
          { required: true, message: "请填写装修面积", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var reg = /^(?!0+(?:\.0+)?$)(?:0|[1-9]\d*)(?:\.\d{1,2})?$/;
              if (!reg.test(value)) {
                callback(new Error("请输入不小于0且不超过两位小数的数字"));
              }
              if (value > 99999999.99) {
                callback(new Error("不能大于99999999.99"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        // jungong: [
        //   { required: true, message: "请选择竣工日期", trigger: "blur" },
        // ],
        construction_unit: [
          { required: true, message: "请填写施工单位", trigger: "blur" },
        ],
      },

      fileType: ["png", "jpg", "jpeg"],
      fileType1: [
        "png",
        "jpg",
        "jpeg",
        "doc",
        "xls",
        "xlsx",
        "docx",
        "ppt",
        "pptx ",
      ],
      fileLimit: 1,
      fileList: [],
      headers: { "Content-Type": "multipart/form-data" },

      loading: true,
      token: sessionStorage.getItem("token"),
      exportDataStandard: {
        订单号: "order_id",
        下单时间: "cctime",
        订单状态: "status_text",
        用户名称: "nickname",
        收货人: "ship_name",
        收货人电话: "user_mobile",
        收货地址: "ship_address_ds",
        支付状态: "pay_status_text",
        发货状态: "ship_status_text",
        订单总额: "payed",
        商品名称: "name",
        商品单价: "price",
        购买数量: "nums",
        商品总价: "amount",
        商品编码: "bn",
      },
      multipleSelection1: [],
      exportName: "导出订单",
      exportDefaultValue: " ",
      topInputList: [
        { title: "订单号", text: "" },
        { title: "用户手机号", text: "" },
        { title: "收货人姓名", text: "" },
      ],
      value1: "",
      options1: [
        {
          value: "111",
          label: "请选择",
        },
        {
          value: "1",
          label: "普通订单",
        },
        {
          value: "2",
          label: "快修",
        },
        {
          value: "3",
          label: "一键送水",
        },
        {
          value: "4",
          label: "桶套餐",
        },
        {
          value: "10",
          label: "空桶押金订单",
        },
        {
          value: "11",
          label: "退桶押金",
        },
      ],
      hetongStatus: [
        {
          value: "1",
          label: "可以质保",
        },
        {
          value: "2",
          label: "不可以质保",
        },
      ],
      currentPage: 1,
      total: 0,
      limit: 10,
      time: "",
      time1: "",
      tableData: [],
      dialogTitle: "添加质保",
      dialogVisible: false,
      innerVisible: false,
      guanlianName: "",
    };
  },
  methods: {
    chakan(e) {
      if (e.type == "") {
        return;
      }
      if (e.type == "image") {
        this.showViewer = true;
        this.url = e.img;
      } else {
        console.log(e.img);
        this.innerVisible = true;
        this.wenjianSrc =
          "https://view.officeapps.live.com/op/view.aspx?src=" + e.img;
        // window.open(e.img)
      }
    },
    xiazai(e) {
      window.open(e.img);
    },
    closeVisible() {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
      this.qingkongFun();
    },
    save() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          // if (!this.ruleForm.user_id) {
          //   this.$message.error("请输入关联用户编码");
          //   return;
          // }
          if (!this.ruleForm.contract_period) {
            this.$message.error("请选择合同期限");
            return;
          }
          if (
            !this.ruleForm.completion_acceptance_time ||
            this.ruleForm.completion_acceptance_time == "1970-01-01"
          ) {
            this.$message.error("请选择竣工日期");
            return;
          }
          if (
            !this.ruleForm.construction_delay_end ||
            this.ruleForm.construction_delay_end == "" ||
            this.ruleForm.construction_delay_end == "1970-01-01"
          ) {
            this.$message.error("请选择质保截止日期");
            return;
          }
          construction_add(
            this.token,
            this.ruleForm.user_id,
            JSON.stringify(this.ruleForm)
          ).then((res) => {
            if (res.data.status) {
              this.$message({
                message: "创建成功",
                type: "success",
              });
              this.dialogVisible = false;
              this.qingkongFun();

              this.construction_list();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    save2() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          // if (!this.ruleForm.user_id) {
          //   this.$message.error("请输入关联用户编码");
          //   return;
          // }
          if (!this.ruleForm.contract_period) {
            this.$message.error("请选择合同期限");
            return;
          }
          // 编辑的时候不填竣工日期默认为1970-01-01
          if (
            this.ruleForm.completion_acceptance_time == "1970-01-01" ||
            this.ruleForm.completion_acceptance_time == ""
          ) {
            this.$message.error("请选择竣工日期");
            return;
          }
          if (
            this.ruleForm.construction_delay_end == "1970-01-01" ||
            this.ruleForm.construction_delay_end == ""
          ) {
            this.$message.error("请选择质保截止日期");
            return;
          }
          construction_up(
            this.token,
            this.ruleForm.id,
            JSON.stringify(this.ruleForm)
          ).then((res) => {
            if (res.data.status) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.dialogVisible = false;
              this.qingkongFun();
              this.construction_list();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    closeViewer() {
      this.showViewer = false;
      this.url = "";
    },
    // 压缩文件
    async compressFile(singleFile) {
      let config = {
        quality: 0.5, //默认0.5  0-1
        // width:100,
        // height:100
      };
      let result = await compressImage({
        file: singleFile.raw,
        config,
        fileName: singleFile.name,
      });
      this.srcList2 = result.finalFile;
      // console.log("bbb", this.srcList2);
      console.log("压缩前图片大小===>", singleFile.size);
      console.log("压缩后图片大小===>", this.srcList2.size);
    },
    async uploadFile(item) {
      console.log("文件", item);
      this.$message("文件上传中........");
      if (
        item.file.type == "image/jpeg" ||
        item.file.type == "image/jpg" ||
        item.file.type == "image/png"
      ) {
        let singleFile = {};
        singleFile.raw = item.file;
        singleFile.name = item.file.name;
        singleFile.size = item.file.size;
        singleFile.uid = item.file.uid;
        await this.compressFile(singleFile);
        console.log("srcList2", this.srcList2);
        uploadFilec(this.srcList2).then((res) => {
          if (res.data.status != false || res.data.id != null) {
            res.data.data.saveurl; //半截
            res.data.data.weburl; //全拼
            item.data.data.img = res.data.data.weburl;
            if (
              item.file.type == "image/png" ||
              item.file.type == "image/jpeg"
            ) {
              item.data.data.type = "image";
              console.log(item.file.type);
            } else {
              item.data.data.type = "other";
            }
            console.log(item.data.data);
            // this.formLabelAlign.atavar = res.data.data.weburl
            // this.formLabelAlign.avatar = res.data.data.saveurl
            this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
            for (let key in this.ruleForm) {
              if (key == item.data.data.shuju) {
                this.ruleForm[key] = res.data.data.saveurl;
              }
            }
            console.log(this.ruleForm);
            let i = this.fileList.indexOf(item.file);
            this.handleSuccess();
          }
        });
      } else {
        uploadDocument(item.file).then((res) => {
          if (res.data.status != false || res.data.id != null) {
            res.data.data.saveurl; //半截
            res.data.data.weburl; //全拼
            item.data.data.img = res.data.data.weburl;
            if (
              item.file.type == "image/png" ||
              item.file.type == "image/jpeg"
            ) {
              item.data.data.type = "image";
              console.log(item.file.type);
            } else {
              item.data.data.type = "other";
            }
            console.log(item.data.data);
            // this.formLabelAlign.atavar = res.data.data.weburl
            // this.formLabelAlign.avatar = res.data.data.saveurl
            this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
            for (let key in this.ruleForm) {
              if (key == item.data.data.shuju) {
                this.ruleForm[key] = res.data.data.saveurl;
              }
            }
            console.log(this.ruleForm);
            let i = this.fileList.indexOf(item.file);
            this.handleSuccess();
          }
        });
      }

      //上传文件的需要formdata类型;所以要转
      // uploadFilec(item.file).then((res) => {
      //   console.log(res, "======");
      //   if (res.data.status != false || res.data.id != null) {
      //     // console.log(res.data.data)
      //     res.data.data.saveurl; //半截
      //     res.data.data.weburl; //全拼
      //     item.data.data.img = res.data.data.weburl;
      //     if (item.file.type == "image/png" || item.file.type == "image/jpeg") {
      //       item.data.data.type = "image";
      //       console.log(item.file.type);
      //     } else {
      //       item.data.data.type = "other";
      //     }
      //     console.log(item.data.data);
      //     // this.formLabelAlign.atavar = res.data.data.weburl
      //     // this.formLabelAlign.avatar = res.data.data.saveurl
      //     this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
      //     for (let key in this.ruleForm) {
      //       if (key == item.data.data.shuju) {
      //         this.ruleForm[key] = res.data.data.saveurl;
      //       }
      //     }
      //     console.log(this.ruleForm);
      //     let i = this.fileList.indexOf(item.file);
      //     this.handleSuccess();
      //   } else {
      //     this.$message.error(res.data.msg);
      //   }
      // });
    },
    //上传成功后的回调
    handleSuccess() {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.handleClose();
    },
    handleRemove() {},
    handleClose(item) {
      this.fileList.splice(0, 1); //删除上传的文件
    },
    //超出文件个数的回调
    handleExceed(item) {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },

    beforeUpload(file) {
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 1; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小不能超过 1MB!");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },
    // 压缩文件
    compressFile() {
      let config = {
        quality: 0.5, //默认0.5  0-1
        // width:100,
        // height:100
      };
      this.fileList.forEach(async (item) => {
        // console.log("this.fileList1", this.fileList1);
        console.log("原图size1===>", item.size);
        let result = await compressImage({
          file: item.raw,
          config,
          fileName: item.name,
        });
        console.log("压缩后图片size1===>", result.finalFile.size);
        // this.imageList.push(result);
        this.srcList2 = result.finalFile;
        // console.log("aaa", result.finalFile);
        // console.log("bbb", this.srcList2);
        // console.log("this.srcList", this.srcList);
      });
      // console.log("压缩后图片1===>", this.imageList);
    },
    beforeUpload1(file) {
      console.log(111111, file);
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 50; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小不能超过 50MB!");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType1.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },
    zhuanhuashuju(row) {
      this.guanlianName = "";
      this.ruleForm = JSON.parse(JSON.stringify(row));
      this.guanlianName = JSON.parse(JSON.stringify(row)).user_name;
      this.time = [];
      this.jungong = "";
      this.zhuangxiuImg.forEach((item) => {
        item.img = "";
        item.type = "";
      });
      this.shejiImageList.forEach((item) => {
        item.img = "";
        item.type = "";
      });
      if (this.ruleForm.contract_period) {
        console.log(this.ruleForm.contract_period, "xin");
        this.ruleForm.contract_period.split(",").forEach((item) => {
          this.time.push(new Date(item + " 00:00:00"));
        });
        console.log(this.time, "time");
      }
      console.log(this.ruleForm.completion_acceptance_time, "asdasdasd");
      if (this.ruleForm.completion_acceptance_time) {
        this.jungong = new Date(
          this.ruleForm.completion_acceptance_time + " 00:00:00"
        );
        console.log(this.jungong, "jungong");
      }
      console.log(this.ruleForm);
      if (this.ruleForm.construction_delay_end) {
        this.construction_delay_end = new Date(
          this.ruleForm.construction_delay_end + " 00:00:00"
        );
      }
      let time = this.jungong - this.time[1];
      this.ruleForm.construction_delay = time / 1000 / 24 / 60 / 60;
      for (let key in this.ruleForm) {
        this.zhuangxiuImg.forEach((item) => {
          if (key == item.shuju) {
            item.img = this.imgHeader + this.ruleForm[key];
            if (
              this.ruleForm[key].split(".")[1] == "jpg" ||
              this.ruleForm[key].split(".")[1] == "png" ||
              this.ruleForm[key].split(".")[1] == "jpeg"
            ) {
              item.type = "image";
            } else {
              item.type = "other";
            }
          }
        });
        this.shejiImageList.forEach((item) => {
          if (key == item.shuju) {
            item.img = this.imgHeader + this.ruleForm[key];
            if (
              this.ruleForm[key].split(".")[1] == "jpg" ||
              this.ruleForm[key].split(".")[1] == "png" ||
              this.ruleForm[key].split(".")[1] == "jpeg"
            ) {
              item.type = "image";
            } else {
              item.type = "other";
            }
          }
        });
      }
    },
    checkOrder(row) {
      this.zhuanhuashuju(row);

      this.dialogTitle = "查看";
      this.dialogVisible = true;
    },
    deleteBtn(e) {
      console.log(e.id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          construction_del(this.token, e.id).then((res) => {
            if (res.data.status) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.construction_list();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    set(row) {
      console.log(row);
      this.zhuanhuashuju(row);
      this.dialogTitle = "编辑";
      this.dialogVisible = true;
    },

    createExportData() {
      return this.multipleSelection1;
    },
    startDownload() {
      if (this.multipleSelection1.length <= 0) {
        this.$message("请选择要下载的数据");
      } else {
        this.$message("下载中···");
      }
    },
    finishDownload() {
      this.$message({
        message: "下载成功",
        type: "success",
      });
      // 下载成功取消选择
      this.toggleSelection();
    },
    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
    },
    getNowTime(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let seconds = date.getSeconds();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      return year + "-" + month + "-" + day;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    datePicker(e) {
      this.time = "";
      if (e != null) {
        e.forEach((item) => {
          this.time += this.getNowTime(item) + ",";
        });
        this.time = this.time.slice(0, this.time.length - 1);
      } else {
        this.time = "";
      }
    },
    datePicker2(e) {
      console.log(e);
      this.time1 = "";
      if (e != null) {
        console.log(e);
        e.forEach((item) => {
          this.time1 += this.getNowTime(item) + ",";
        });
        this.time1 = this.time1.slice(0, this.time1.length - 1);
      } else {
        this.time1 = "";
      }
      console.log("jjj", this.time1);
      this.ruleForm.contract_period = this.time1;
    },
    jungongChange(e) {
      console.log(e);
      this.ruleForm.completion_acceptance_time = this.getNowTime(e);
    },
    zhibaojiezhiChange(e) {
      this.ruleForm.construction_delay_end = this.getNowTime(e);
    },
    opctionchangeOne(e) {},
    opctionchangeOne1(e) {},
    // 添加
    add() {
      this.dialogVisible = true;
      this.dialogTitle = "添加质保";
    },
    CloseDialog() {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
      this.qingkongFun();
    },
    // 每页 ${val} 条
    handleSizeChange(val) {
      this.limit = val;
      this.construction_list();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.construction_list();
    },
    search() {
      this.currentPage = 1;
      // return
    },
    qingkongFun() {
      this.ruleForm = {
        mobile: "",
        status: "2",
        design_unit: "", //'设计单位',
        project_design: "", //'主案设计',
        design_phone: "", // 设计电话
        working_drawing: "", // '施工图',
        rendering: "", //  '效果图',
        panorama: "", // '全景图',
        digital_img: "", // '数字化审图',
        changes: "", //  '施工变更',
        effect_change: "", //  '效果变更',
        panoramic_changes: "", //  '全景变更',
        digital_change: "", //  '数字化变更',
        name: "", //'甲方名称',
        brand: "", //  '品牌名称',
        decoration: "", //  '装修面积',
        lease_contract: "", //  '租赁合同',
        property_certificate: "", //  '房产证明',
        Industry_attributes: "", //  '行业属性',
        lease_term: "", //  '租赁期限',
        decoration_address: "", //  '装修地址',
        construction_unit: "", //  '施工单位',
        behalf_party: "", //  '甲方代表',
        behalf_phone: "", //  '甲方电话',
        partyb_party: "", // '甲方代表',
        partyb_phone: "", //  '乙方电话',
        construction_foreman: "", //  '施工工长',
        construction_phone: "", //  '施工电话',
        contract_period: "", //  '合同期限',
        completion_acceptance_time: "", //  '竣工验收时间',
        construction_delay_end: "", //质保截至日期
        construction_delay: "", //  '施工延期',
        construction_changes: "", //  '施工变更',
        remove: "", //拆除合同
        construction: "", //施工合同
        construction_budget: "", //施工预算
        disclosure: "", //施工交底
        hidden: "", //隐检验收
        completion_acceptance: "", //竣工验收
        engineering_settlement: "", //工程结算
        warranty: "", //施工质保
        testimonials: "", //客户评价
      };
      this.shejiImageList = [
        { type: "", name: "施工图", img: "", shuju: "working_drawing" },
        { type: "", name: "效果图", img: "", shuju: "rendering" },
        { type: "", name: "全景图", img: "", shuju: "panorama" },
        { type: "", name: "数字化审图", img: "", shuju: "digital_img" },
        { type: "", name: "施工变更", img: "", shuju: "changes" },
        { type: "", name: "效果变更", img: "", shuju: "effect_change" },
        { type: "", name: "全景变更", img: "", shuju: "panoramic_changes" },
        { type: "", name: "数字化变更", img: "", shuju: "digital_change" },
      ];
      this.zhuangxiuImg = [
        { type: "", name: "租赁合同", img: "", shuju: "lease_contract" },
        { type: "", name: "房产证明", img: "", shuju: "property_certificate" },
        { type: "", name: "拆除合同", img: "", shuju: "remove" },
        { type: "", name: "施工变更", img: "", shuju: "construction_changes" },
        { type: "", name: "施工合同", img: "", shuju: "construction" },
        { type: "", name: "施工预算", img: "", shuju: "construction_budget" },
        { type: "", name: "施工交底", img: "", shuju: "disclosure" },
        { type: "", name: "隐检验收", img: "", shuju: "hidden" },
        { type: "", name: "竣工验收", img: "", shuju: "completion_acceptance" },
        {
          type: "",
          name: "工程结算",
          img: "",
          shuju: "engineering_settlement",
        },
        { type: "", name: "施工质保", img: "", shuju: "warranty" },
        { type: "", name: "客户评价", img: "", shuju: "testimonials" },
      ];
      this.time = "";
      this.jungong = "";
    },
    // 接口
    construction_list() {
      this.loading = true;
      construction_list(this.token, this.currentPage, this.limit).then(
        (res) => {
          if (res.data.status) {
            this.total = res.data.data.count;
            this.tableData = res.data.data.data;
            console.log(this.tableData);
          }
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          }, 400);
        }
      );
    },
  },
  created() {
    this.construction_list();
  },
  watch: {
    time1(n, o) {
      if (this.time1 && this.jungong) {
        console.log(this.jungong, "====", this.time[1]);
        console.log(this.jungong, "==", this.time);
        let time = this.jungong.getTime() - this.time[1].getTime();
        this.ruleForm.construction_delay = time / 1000 / 24 / 60 / 60;
      }
    },
    jungong(n, o) {
      // console.log(n);
      if (this.time1 && this.jungong) {
        let time = this.jungong.getTime() - this.time[1].getTime();
        this.ruleForm.construction_delay = time / 1000 / 24 / 60 / 60;
      }
    },
  },
};
</script>

<style scoped>
/deep/.upload-demo .el-upload--text {
  border: none;
  width: 100%;
  height: auto;
}
/deep/.upload-demo .el-upload--text .el-upload-dragger {
  width: 100%;
}

.upload-demo {
  line-height: normal;
}
/deep/.header {
  background: white !important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
  align-items: center;
}
.header .span {
  font-size: initial;
}
.datePicker {
  margin-right: 20px;
}
.everyBox {
  display: flex;
  align-items: center;
  padding: 10px 0;
  margin-right: 10px;
}
.top-input {
  width: 150px;
  margin-right: 20px;
}
/deep/.demo-ruleForm .el-input {
  width: 200px;
  /* margin-left: 20px; */
}
.shejiImageList {
  display: flex;
  flex-wrap: wrap;
}
.shejiImageList .every {
  margin-bottom: 20px;
  padding-bottom: 10px;
  width: 24%;
  text-align: center;
  border: 1px solid #e6e6e6;
}
.zhuangxiuImg {
  display: flex;
  flex-wrap: wrap;
}
.zhuangxiuImg .every {
  width: 33%;
  text-align: center;
  border: 1px solid #e6e6e6;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
.dialog-footer {
  text-align: center;
}
.dialog-footer .btn {
  width: 300px;
  padding: 20px;
  font-size: 20px;
}
.el-range-editor {
  width: 230px;
  margin-left: 20px;
}

/deep/.el-table th.el-table__cell > .cell {
  text-align: center;
}
/deep/.el-table .cell.el-tooltip {
  text-align: center;
}
/deep/.el-table--border .el-table__cell:first-child .cell {
  text-align: center;
}
/deep/.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}
</style>
